<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="table.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        function showAddDiv(){
            let divObj=$("addDiv");
            //显示遮罩
            divObj.style.visibility="visible";
            divObj.style.width=document.documentElement.clientWidth+"px";
            divObj.style.height=document.documentElement.clientHeight+"px";
        }
        function closeDiv(){
            //重新隐藏遮罩
            $("addDiv").style.visibility="hidden";
        }
    </script>
    <style>
        #addDiv {
            width: 800px;height: 400px;
            background-color: rgba(225,34,12,0.5);
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
        }

    </style>
</head>
<body>
    <table border="1" cellspacing="0" width="20%" style="text-align: center">
        <thead>
        <tr><th>姓名</th><th>性别</th><th>电话</th></tr>
        </thead>
        <tbody id="tbody">
        <tr><td>赵谦</td><td>男</td><td>13271981634</td></tr>
        <tr><td>吴杰</td><td>男</td><td>13271981634</td></tr>
        <tr><td>李青</td><td>男</td><td>13271981634</td></tr>
        <tr><td>曾静</td><td>男</td><td>13271981634</td></tr>
        <tr><td>刘雄</td><td>男</td><td>13271981634</td></tr>
        </tbody>
    </table><br><hr>
<!--    这种方式无法通过this得到当前对象-->
    <a href="javascript:alert('aaa')">超链接伪URL</a>
    <a href="javascript:void(0)" onclick="alert(this.innerHTML)">超链接伪URL</a>
    <hr style="border: 3px solid slateblue">
    <input type="button" value="添加" onclick="showAddDiv()">
    <div id="addDiv">
        <div id="contentDiv">
            <input type="button" value="关闭" onclick="closeDiv()">
        </div>
    </div>
</body>
</html>